<template>
	<el-col>
		<el-menu :default-active="activeMenuItem" :unique-opened="true" class="el-aside-nav">
			<el-menu-item index="1" @click="toPage({path:'/',curMenuItem:'1'})">
				<i class="el-icon-house"></i>
				<span slot="title">首页</span>
			</el-menu-item>
			<el-submenu index="2" :disabled="!(relevanceUserID!==-1)">
				<template slot="title" @click="toPage({path:'/project_admin',curMenuItem:'2'})">
					<i class="el-icon-suitcase-1"></i>
					<span>项目管理</span>
				</template>
				<el-menu-item index="2-1" @click="toPage({path:'/project_admin/create',curMenuItem:'2-1'})">
					<i class="el-icon-edit-outline"></i>
					<span slot="title">编辑项目</span>
				</el-menu-item>
				<el-menu-item index="2-2" @click="toPage({path:'/project_admin/underway',curMenuItem:'2-2'})">
					<i class="el-icon-finished"></i>
					<span slot="title">正在进行</span>
				</el-menu-item>
				<el-menu-item index="2-3" @click="toPage({path:'/project_admin/history',curMenuItem:'2-3'})">
					<i class="el-icon-time"></i>
					<span slot="title">历史项目</span>
				</el-menu-item>
			</el-submenu>
			<el-menu-item index="3" @click="toPage({path:'/project',curMenuItem:'3'})">
				<i class="el-icon-notebook-2"></i>
				<span slot="title">模板参考</span>
			</el-menu-item>
			<el-menu-item index="4" @click="toPage({path:'/about',curMenuItem:'4'})">
				<i class="el-icon-user"></i>
				<span slot="title">关于我们</span>
			</el-menu-item>
		</el-menu>
	</el-col>
</template>

<script>
	import {mapState} from "vuex"
	export default {
		data(){
			return{
				activeMenuItem:"1"
			}
		},
		computed:{
			...mapState(['relevanceUserID'])
		},
		created() {
			this.activeMenuItem = uni.getStorageSync('curAsideMenuItem') || '1';
		},
		methods: {
			toPage(option){
				this.activeMenuItem = uni.getStorageSync('curAsideMenuItem') || '';
				if(this.activeMenuItem !== option.curMenuItem){
					this.activeMenuItem = option.curMenuItem;
					uni.setStorageSync('curAsideMenuItem',option.curMenuItem) //缓存当前asideBar
					uni.setStorageSync('curRouter',option.path) // 缓存当前路由
				}
				this.$router.push(option.path);
			}
		}
	}
</script>

<style>
	.el-aside-nav{
		border: none;
	}
</style>
